<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PromiseAPI的应用</title>
</head>
<body>
<div id="imgList" class="imgList">
<!--    <img id="img01" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=153960715,2502274764&fm=26&gp=0.jpg" alt="">-->
<!--    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474266791,210202337&fm=26&gp=0.jpg" alt="">-->
<!--    <img src="https://img2.baidu.com/it/u=142535408,4047253383&fm=26&fmt=auto&gp=0.jpg" alt="">-->
</div>
<script>
    //promise.all
    //需求 有三张图片, 如果这三张图片都加载完成 那么才会显示到页面中 否则就不显示

    let imgList = document.getElementById("imgList");
    console.log(imgList);
    // imgList.appendChild()

    let loadImg = function (src){
        return new Promise((resolve, reject)=>{
            //创建一个img标签
            let img = document.createElement("img");
            img.src = src;//img标签,当获得真正的src属性的时候,图片才开始加载
            img.onload = ()=>{//图片加载成功之后的回调函数
                resolve(img)
            };
            img.onerror = ()=>{//图片加载失败之后的回调函数
                reject(new Error("图片加载失败"))
            }
        })
    }
    let p1 = loadImg("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=153960715,2502274764&fm=26&gp=0.jpg");
    let p2 = loadImg("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474266791,210202337&fm=26&gp=0.jpg");
    let p3 = loadImg("https://img2.baidu.com/it/u=142535408,4047253383&fm=26&fmt=auto&gp=0.jpg");
    // let pAll = Promise.all([p1,p2,p3])
    // pAll.then((res)=>{
    //     res.forEach(item=>{
    //         imgList.appendChild(item)
    //     })
    // }).catch((err)=>{
    //     console.error(err)
    // });

    //一个页面 需要三个或者N个接口的数据都返回来的时候 才可以展示


    //promise.race
    //需求 有一张图片,当加载时间超过1s的时候 就不再去加载了,在页面中显示加载超时,如果1s内加载完成,则显示图片

    function timeOut(){
        return new Promise((resolve)=>{
            setTimeout(()=>{
                resolve("超时")
            },1)
        })
    }
    let p4 = loadImg("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=153960715,2502274764&fm=26&gp=0.jpg");
    let pRace = Promise.race([timeOut(),p4])
    pRace.then((res)=>{
        console.log(res);
        if(typeof res === "string"){
            imgList.innerText = "图片请求超市"
        }else {
            imgList.appendChild(res)
        }
    },err=>{

    })

</script>
</body>
</html>